const gulp = require('gulp');
const rename = require('gulp-rename');
const contact = require('gulp-concat');
const js = require('gulp-uglify');
const babel = require('gulp-babel'); // es6转为es5
const jshint = require('gulp-jshint');
const css = require('gulp-minify-css');
const less = require('gulp-less');
const cssClean = require('gulp-clean-css');
const imgaes = require('gulp-imagemin');
const html = require('gulp-minify-html');

// js代码检查
gulp.task('jshint', done => {
    gulp.src('js/index.js')
        .pipe(jshint())
        .pipe(jshint.reporter()); // 输出检查结果
    done()
});
// es6转化为es5 + 压缩
gulp.task('babel', done => {
    gulp.src('js/index.js')
        .pipe(babel())
        .pipe(gulp.dest('dist/js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(js())
        .pipe(gulp.dest('dist/js'));
    done()
});
// js压缩 js包含错误或者es6语法时无法解压
gulp.task('js-uglify', done => { // 对应下面启动时的变量名
    gulp.src(['js/index.js', "js/index1.js"])
        .pipe(contact('all.js')) // 文件合并并命名
        .pipe(gulp.dest('dist/js')) // 临时输出文件到本地，这样就会产生俩个文件：.js和.min.js文件
        .pipe(js()) // 对应上面const的变量名
        .pipe(rename({suffix: '.min'})) // 后缀名.min
        .pipe(gulp.dest('dist/js')); // 输出到文件夹
    done()
});
// css压缩
gulp.task('css-minify', done => {
    gulp.src('css/index2.css')
        .pipe(css())
        .pipe(cssClean({compatibility: 'ie8'})) // 兼容到IE8
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'));
    done()
});
// less压缩
gulp.task('less-minify', done => {
    gulp.src('css/*.less')
        .pipe(less())
        .pipe(css())
        .pipe(cssClean({compatibility: 'ie8'})) // 兼容到IE8
        .pipe(contact('all.css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'));
    done()
});
// images压缩
gulp.task('imagemin', done => {
    gulp.src('images/*')
        .pipe(imgaes([ // gulp版本4的写法
            imgaes.gifsicle({interlaced: true}),  // 隔行扫描gif进行渲染
            imgaes.jpegtran({progressive: true}), // 无损压缩jpg图片
            imgaes.optipng({optimizationLevel: 5}), //优化等级， 范围0-7
            imgaes.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            }) // 优化svg图片
        ]))
        .pipe(gulp.dest('dist/images'));
    done()
});
// html压缩
gulp.task('html-minify', done => {
    gulp.src('xcd.html')
        .pipe(html({
            collapseWhitespace: true,  //空白缩进
            removeComments: true  //删除评论
        }))
        .pipe(gulp.dest('dist/'));
    done()
});

// 任务
gulp.task('default', gulp.series(['js-uglify', 'babel', 'css-minify', 'less-minify', 'imagemin', 'html-minify']), done => {
    done()
});

// Browsersync 浏览器同步工具
// 第一步全局安装（只安装一次）：npm install -g browser-sync
// 第二部项目内安装：npm install --save-dev browser-sync
// 第三部项目cmd中运行：browser-sync start --server --files "css/*.css, *.html, js/index.js"

// gulp-babel es6转es5
// npm install gulp-babel --save-dev
// npm install @babel/core@^7.0.0 --save-dev
// npm install babel-preset-env --save-dev
// 创建.babelrc
// {
//     "presets": ["env"]
// }